<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Mifa Design System</title>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="mifa.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<main class="wrapper">

	<nav class="navigation">
		<section class="container"><a class="navigation-title" href="https://github.com/phodal/mifa">
			<svg class="img" viewBox="0 0 56 66" version="1.1" xmlns="http://www.w3.org/2000/svg">
				<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<circle id="Oval" stroke="#23B7F3" stroke-width="0.1" fill="#23B7F3" cx="50.5" cy="5.5" r="4.5"></circle>
					<path d="M0.71875,14.09375 L10.7890572,14.09375 L25.7001787,57.9790887 L40.505297,14.09375 L50.4696009,14.09375 L50.4696009,16 L50.4696009,17 L50.4696009,18.5 L50.4696009,66 L43.7913972,66 L43.7913972,35.3650655 C43.7913972,34.3050279 43.8149532,32.550103 43.862066,30.1002383 C43.9091788,27.6503735 43.9327349,25.0238752 43.9327349,22.2206646 L29.1276166,66 L22.1667376,66 L7.25561607,22.2206646 L7.25561607,23.8107131 C7.25561607,25.0827582 7.28506111,27.0202424 7.34395209,29.6232237 C7.40284307,32.226205 7.43228812,34.1401331 7.43228812,35.3650655 L7.43228812,66 L0.71875,66 L0.71875,14.09375 Z" id="M" fill="#384452"></path>
				</g>
			</svg>&nbsp;<h1 class="title">Mifa</h1></a>
			<a href="https://github.com/phodal/mifa" title="Mifa on Github" target="_blank">
				<svg class="octocat" viewBox="0 0 250 250">
					<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
					<path class="octocat-arm"
						  d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path>
					<path class="octocat-body"
						  d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path>
				</svg>
			</a>
		</section>
	</nav>
	<header class="header" id="home">
		<section class="container">
			<svg style="height: 12rem;" class="img" viewBox="0 0 56 66" version="1.1" xmlns="http://www.w3.org/2000/svg">
				<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<circle id="Oval" stroke="#23B7F3" stroke-width="0.1" fill="#23B7F3" cx="50.5" cy="5.5" r="4.5"></circle>
					<path d="M0.71875,14.09375 L10.7890572,14.09375 L25.7001787,57.9790887 L40.505297,14.09375 L50.4696009,14.09375 L50.4696009,16 L50.4696009,17 L50.4696009,18.5 L50.4696009,66 L43.7913972,66 L43.7913972,35.3650655 C43.7913972,34.3050279 43.8149532,32.550103 43.862066,30.1002383 C43.9091788,27.6503735 43.9327349,25.0238752 43.9327349,22.2206646 L29.1276166,66 L22.1667376,66 L7.25561607,22.2206646 L7.25561607,23.8107131 C7.25561607,25.0827582 7.28506111,27.0202424 7.34395209,29.6232237 C7.40284307,32.226205 7.43228812,34.1401331 7.43228812,35.3650655 L7.43228812,66 L0.71875,66 L0.71875,14.09375 Z" id="M" fill="#384452"></path>
				</g>
			</svg>
			<h1 class="title">mifa</h1>
		</section>
	</header>
	<div id="color" class="container example">
		<div class="pattern-example">
			<h4>灰色</h4>
			<div class="color-example color-primary"><span>#384452</span> &nbsp;<span>$color-primary</span></div>
			<div class="color-example color-dark-grey"><span>#5e6772</span> &nbsp;$color-dark-grey</div>
			<div class="color-example color-grey"><span>#d1d8df</span> &nbsp;$color-grey</div>
			<div class="color-example color-code-grey"><span>#eef1f5</span> &nbsp;$color-code-grey</div>
			<div class="color-example color-light-grey"><span>#fdfdfd</span> &nbsp;$color-light-grey</div>
		</div>
		<div class="pattern-example">
			<h4>Content</h4>
			<div class="color-example color-green"><span>#1abc9c</span> &nbsp;$color-green</div>
			<div class="color-example color-blue"><span>#23B7F3</span> &nbsp;$color-blue</div>
			<div class="color-example color-red"><span>#f53d3d</span> &nbsp;$color-red</div>
			<div class="color-example color-yellow"><span>#ffff3a</span> &nbsp;$color-yellow</div>
		</div>
	</div>

	<div id="typography" class="width-wrapper example">
		<div class="row">
			<div class="column">
				<h1>标题一<span class="heading-font-size"> <code>&lt;h1&gt;</code> 4.0rem (40px)</span></h1>
				<h2>标题二<span class="heading-font-size"> <code>&lt;h2&gt;</code> 3.2rem (32px)</span></h2>
				<h3>标题三<span class="heading-font-size"> <code>&lt;h3&gt;</code> 2.8rem (28px)</span></h3>
				<h4>标题四<span class="heading-font-size"> <code>&lt;h4&gt;</code> 2.4rem (24px)</span></h4>
				<h5>标题五<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.0rem (20px)</span></h5>
				<h6>标题六<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.6rem (16px)</span></h6>
			</div>
			<div class="column">
				<p>永和九年，岁在癸丑。暮春之初，会於会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹。又有清流激湍，映带左右，引以为流觞曲水。,
					<u>列坐其次，虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。</u>.</p>
				<p>是日也， <s>天朗气清</s> 惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱, <a href="#">所以游目骋怀</a> ，足以极视听之娱 <i>，信可乐也！</i></p>
				<p> 夫人之相与，俯仰一世。<b>或取诸怀抱，晤言一室之内；</b>或因寄所托，放浪形骸之外。
					<small>虽取舍万殊，静躁不同，当其欣於所遇，暂得於己</small>
					，
					<mark>快然自足，曾不知老之将至。</mark>
					,
					<time>及其所之既倦</time>
					情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀，况修短随化，终期於尽？古人云：“死生亦大矣”，岂不痛哉！
				</p>
				<p>每览昔人兴感之由，若合一契，未尝不临文嗟悼，<strong>不能喻之於怀。</strong>固知一死生为虚诞，齐彭殇为妄作。<em>后之视今，亦犹今之视昔，悲夫！故列叙时人，录其所述。</em>
					虽世殊事异，所以兴怀，其致一也。 <q>后之览者，亦将有感於斯文</q>。</p>
			</div>
		</div>
	</div>

	<div class="width-wrapper">
		<h5 class="title">Blockquotes</h5>
		<hr>
		<div class="example">
			<div class="row">
				<div class="column">
					<p><q>Mifa 是一个专为 Phodal 的个人项目为设计的 Design System。</q></p>
				</div>
				<div class="column">
					<blockquote>
						<p><em>Mifa 是一个专为 Phodal 的个人项目为设计的 Design System。</em></p>
					</blockquote>
				</div>
			</div>
		</div>
	</div>

	<section class="container" id="buttons">
		<h5 class="title">Buttons</h5>
		<hr>
		<div class="example">
			<div class="row">
				<div class="column">
					<a class="button" href="javascript: void(0)">Default Button</a>
					<a class="button button-outline" href="javascript: void(0)">Outlined Button</a>
					<a class="button button-clear" href="javascript: void(0)">Clear Button</a>
					<a class="button" disabled href="javascript: void(0)">Default Button</a>
					<a class="button button-outline" disabled href="javascript: void(0)">Outlined Button</a>
					<a class="button button-clear" disabled href="javascript: void(0)">Clear Button</a>
				</div>
				<div class="column">
					<button class="button">Default Button</button>
					<button class="button button-outline">Outlined Button</button>
					<button class="button button-clear">Clear Button</button>
					<button class="button" disabled>Default Button</button>
					<button class="button button-outline" disabled>Outlined Button</button>
					<button class="button button-clear" disabled>Clear Button</button>
				</div>
				<div class="column">
					<input class="button" type="submit" value="Default Button">
					<input class="button button-outline" type="submit" value="Outlined Button">
					<input class="button button-clear" type="submit" value="Clear Button">
					<input class="button" disabled type="submit" value="Default Button">
					<input class="button button-outline" disabled type="submit" value="Outlined Button">
					<input class="button button-clear" disabled type="submit" value="Clear Button">
				</div>
			</div>
			<div class="row">
				<div class="column">
					<input class="button" type="reset" value="Default Button">
					<input class="button button-outline" type="reset" value="Outlined Button">
					<input class="button button-clear" type="reset" value="Clear Button">
					<input class="button" disabled type="reset" value="Default Button">
					<input class="button button-outline" disabled type="reset" value="Outlined Button">
					<input class="button button-clear" disabled type="reset" value="Clear Button">
				</div>
				<div class="column">
					<input class="button" type="button" value="Default Button">
					<input class="button button-outline" type="button" value="Outlined Button">
					<input class="button button-clear" type="button" value="Clear Button">
					<input class="button" disabled type="button" value="Default Button">
					<input class="button button-outline" disabled type="button" value="Outlined Button">
					<input class="button button-clear" disabled type="button" value="Clear Button">
				</div>
				<div class="column">
					<div class="button">Default Button</div>
					<div class="button button-outline">Outlined Button</div>
					<div class="button button-clear">Clear Button</div>
					<div class="button" disabled>Default Button</div>
					<div class="button button-outline" disabled>Outlined Button</div>
					<div class="button button-clear" disabled>Clear Button</div>
				</div>
			</div>
		</div>
	</section>

	<section class="container" id="lists">
		<h5 class="title">Lists</h5>
		<hr>
		<div class="example">
			<div class="row">
				<div class="column">
					<ul>
						<li>Unordered list item 1</li>
						<li>Unordered list item 2</li>
						<li>Unordered list item 3
							<ul>
								<li>Unordered list item 3.1</li>
								<li>Unordered list item 3.2</li>
								<li>Unordered list item 3.3</li>
							</ul>
						</li>
						<li>Unordered list item 4</li>
						<li>Unordered list item 5</li>
					</ul>
				</div>
				<div class="column">
					<ol>
						<li>Ordered list item 1</li>
						<li>Ordered list item 2</li>
						<li>Ordered list item 3
							<ol>
								<li>Ordered list item 3.1</li>
								<li>Ordered list item 3.2</li>
								<li>Ordered list item 3.3</li>
							</ol>
						</li>
						<li>Ordered list item 4</li>
						<li>Ordered list item 5</li>
					</ol>
				</div>
				<div class="column">
					<dl>
						<dt>Description list item 1</dt>
						<dt>Description list item 2</dt>
						<dt>Description list item 3</dt>
						<dd>Description list item 3.1</dd>
						<dd>Description list item 3.2</dd>
						<dd>Description list item 3.3</dd>
						<dt>Description list item 4</dt>
						<dt>Description list item 5</dt>
					</dl>
				</div>
			</div>
		</div>
	</section>

	<section class="container" id="forms">
		<h5 class="title">Forms</h5>
		<hr>
		<div class="example">
			<form>
				<fieldset>
					<legend>Legend</legend>
					<div class="row">
						<div class="column">
							<label for="textField">Text field</label>
							<input type="text" placeholder="Text field" id="textField">
							<label for="emailField">Email field</label>
							<input type="email" id="emailField" placeholder="Email field">
							<label for="numberField">Number field</label>
							<input type="number" id="numberField" placeholder="Number field">
							<label for="passwordField">Password field</label>
							<input type="password" id="passwordField" placeholder="Password field">
							<label for="selectField">Select field</label>
							<select id="selectField">
								<option value="selectField1">Select field 1</option>
								<option value="selectField2">Select field 2</option>
								<option value="selectField3">Select field 3</option>
								<option value="selectField4">Select field 4</option>
							</select>
							<label for="searchField">Search field</label>
							<input type="search" id="searchField" placeholder="Search field">
						</div>
						<div class="column">
							<label for="telField">Tel field</label>
							<input type="tel" id="telField" placeholder="Tel field">
							<label for="urlField">URL field</label>
							<input type="url" id="urlField" placeholder="URL field">
							<label for="radioField">Radio field</label>
							<div class="row">
								<div class="column">
									<input type="radio" id="radioField1" name="radioField">
									<label class="label-inline" for="radioField1">Radio field 1</label>
								</div>
								<div class="column">
									<input type="radio" id="radioField2" name="radioField">
									<label class="label-inline" for="radioField2">Radio field 2</label>
								</div>
							</div>
							<label for="radioField">Checkbox field</label>
							<div class="row">
								<div class="column">
									<input type="checkbox" id="checkboxField1">
									<label class="label-inline" for="checkboxField1">Checkbox field 1</label>
								</div>
								<div class="column">
									<input type="checkbox" id="checkboxField2">
									<label class="label-inline" for="checkboxField2">Checkbox field 2</label>
								</div>
							</div>
							<label for="textareaField">Textarea field</label>
							<textarea placeholder="Textarea field" id="textareaField"></textarea>
							<input type="submit">
							<input type="reset" class="button-clear">
						</div>
					</div>
				</fieldset>
			</form>
		</div>
	</section>

	<section class="container" id="tables">
		<h5 class="title">Tables</h5>
		<hr>
		<div class="example">
			<table>
				<thead>
				<tr>
					<th>Name</th>
					<th>Age</th>
					<th>Height</th>
					<th>Location</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>Kevin Durant</td>
					<td>27</td>
					<td>2.06</td>
					<td> Washington, DC</td>
				</tr>
				<tr>
					<td>Stephen Curry</td>
					<td>27</td>
					<td>1,91</td>
					<td>Akron, OH</td>
				</tr>
				<tr>
					<td>Klay Thompson</td>
					<td>25</td>
					<td>2,01</td>
					<td>Los Angeles, CA</td>
				</tr>
				<tr>
					<td>Draymond Green</td>
					<td>26</td>
					<td>2,01</td>
					<td>Saginaw, MI</td>
				</tr>
				<tr>
					<td>Andre Iguodala</td>
					<td>32</td>
					<td>1,98</td>
					<td>Springfield, IL</td>
				</tr>
				<tr>
					<td>Anderson Varejão</td>
					<td>33</td>
					<td>2,08</td>
					<td>Colatina, ES</td>
				</tr>
				<tr>
					<td>Shaun Livingston</td>
					<td>30</td>
					<td>2,01</td>
					<td>Peoria, CA</td>
				</tr>
				</tbody>
			</table>
		</div>
	</section>

	<section class="container" id="grids">
		<h5 class="title">Grids</h5>
		<hr>
		<div class="example">
			<div class="row">
				<div class="column"><span class="column-demo">100%</span></div>
			</div>
			<div class="row">
				<div class="column column-10"><span class="column-demo">10%</span></div>
				<div class="column column-90"><span class="column-demo">90%</span></div>
			</div>
			<div class="row">
				<div class="column column-20"><span class="column-demo">20%</span></div>
				<div class="column column-80"><span class="column-demo">80%</span></div>
			</div>
			<div class="row">
				<div class="column column-25"><span class="column-demo">25%</span></div>
				<div class="column column-75"><span class="column-demo">75%</span></div>
			</div>
			<div class="row">
				<div class="column column-33"><span class="column-demo">33%</span></div>
				<div class="column column-67"><span class="column-demo">67%</span></div>
			</div>
			<div class="row">
				<div class="column column-40"><span class="column-demo">40%</span></div>
				<div class="column column-60"><span class="column-demo">60%</span></div>
			</div>
			<div class="row">
				<div class="column column-50"><span class="column-demo">50%</span></div>
				<div class="column column-50"><span class="column-demo">50%</span></div>
			</div>
			<div class="row">
				<div class="column column-60"><span class="column-demo">60%</span></div>
				<div class="column column-40"><span class="column-demo">40%</span></div>
			</div>
			<div class="row">
				<div class="column column-67"><span class="column-demo">67%</span></div>
				<div class="column column-33"><span class="column-demo">33%</span></div>
			</div>
			<div class="row">
				<div class="column column-75"><span class="column-demo">75%</span></div>
				<div class="column column-25"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-80"><span class="column-demo">80%</span></div>
				<div class="column column-20"><span class="column-demo">20%</span></div>
			</div>
			<div class="row">
				<div class="column column-90"><span class="column-demo">90%</span></div>
				<div class="column column-10"><span class="column-demo">10%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">100%</span></div>
			</div>
			<div class="row">
				<div class="column column-90"><span class="column-demo">90%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
			</div>
			<div class="row">
				<div class="column column-80"><span class="column-demo">80%</span></div>
				<div class="column"><span class="column-demo">20%</span></div>
			</div>
			<div class="row">
				<div class="column column-75"><span class="column-demo">75%</span></div>
				<div class="column"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-67"><span class="column-demo">67%</span></div>
				<div class="column"><span class="column-demo">33%</span></div>
			</div>
			<div class="row">
				<div class="column column-60"><span class="column-demo">60%</span></div>
				<div class="column"><span class="column-demo">40%</span></div>
			</div>
			<div class="row">
				<div class="column column-50"><span class="column-demo">50%</span></div>
				<div class="column"><span class="column-demo">50%</span></div>
			</div>
			<div class="row">
				<div class="column column-40"><span class="column-demo">40%</span></div>
				<div class="column"><span class="column-demo">60%</span></div>
			</div>
			<div class="row">
				<div class="column column-33"><span class="column-demo">33%</span></div>
				<div class="column"><span class="column-demo">67%</span></div>
			</div>
			<div class="row">
				<div class="column column-25"><span class="column-demo">25%</span></div>
				<div class="column"><span class="column-demo">75%</span></div>
			</div>
			<div class="row">
				<div class="column column-20"><span class="column-demo">20%</span></div>
				<div class="column"><span class="column-demo">80%</span></div>
			</div>
			<div class="row">
				<div class="column column-10"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">90%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">100%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">50%</span></div>
				<div class="column"><span class="column-demo">50%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">33.3%</span></div>
				<div class="column"><span class="column-demo">33.3%</span></div>
				<div class="column"><span class="column-demo">33.3%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">25%</span></div>
				<div class="column"><span class="column-demo">25%</span></div>
				<div class="column"><span class="column-demo">25%</span></div>
				<div class="column"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">20%</span></div>
				<div class="column"><span class="column-demo">20%</span></div>
				<div class="column"><span class="column-demo">20%</span></div>
				<div class="column"><span class="column-demo">20%</span></div>
				<div class="column"><span class="column-demo">20%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">16.6%</span></div>
				<div class="column"><span class="column-demo">16.6%</span></div>
				<div class="column"><span class="column-demo">16.6%</span></div>
				<div class="column"><span class="column-demo">16.6%</span></div>
				<div class="column"><span class="column-demo">16.6%</span></div>
				<div class="column"><span class="column-demo">16.6%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">14.28%</span></div>
				<div class="column"><span class="column-demo">14.28%</span></div>
				<div class="column"><span class="column-demo">14.28%</span></div>
				<div class="column"><span class="column-demo">14.28%</span></div>
				<div class="column"><span class="column-demo">14.28%</span></div>
				<div class="column"><span class="column-demo">14.28%</span></div>
				<div class="column"><span class="column-demo">14.28%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
				<div class="column"><span class="column-demo">12.5%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
				<div class="column"><span class="column-demo">11.11%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
				<div class="column"><span class="column-demo">10%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
				<div class="column"><span class="column-demo">9.09%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
				<div class="column"><span class="column-demo">8.3%</span></div>
			</div>
			<div class="row">
				<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
			</div>
			<div class="row">
				<div class="column column-50 column-offset-50"><span class="column-demo">50%</span></div>
			</div>
			<div class="row">
				<div class="column column-25 column-offset-75"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
				<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-25"><span class="column-demo">25%</span></div>
				<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column"><span class="column-demo">25%</span></div>
				<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
			</div>
			<div class="row">
				<div class="column column-50"><span class="column-demo">50%</span></div>
				<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-25"><span class="column-demo">25%</span></div>
				<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
			</div>
			<div class="row">
				<div class="column column-75 column-offset-25"><span class="column-demo">75%</span></div>
			</div>
		</div>
	</section>

	<section class="container" id="codes">
		<h5 class="title">Codes</h5>
		<hr>
		<div class="example">
<pre><code>.mifa {
	color: #9b4dca;
}</code></pre>
		</div>
	</section>

	<section class="container" id="code-highlight">
		<h5 class="title">Code Highlight Theme</h5>
		<hr>
		<div class="example">
<pre><code>(function() {
  var input, output;
  var converter = new showdown.Converter();

  function updateOutput() {
    output.innerHTML = converter.makeHtml(input.value);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    input = document.getElementById('input');
    output = document.getElementById('output');

    input.addEventListener('input', updateOutput, false);
    input.addEventListener('keydown', updateOutput, false);

    updateOutput();
  });
})();</code></pre>
		</div>
	</section>

	<section class="container" id="utilities">
		<h5 class="title">Utilities</h5>
		<hr>
		<div class="example">
			<div class="clearfix">
				<img class="float-left" src="http://placehold.it/320/d1d1d1/?text=float+to+left" alt="float to left">
				<img class="float-right" src="http://placehold.it/320/d1d1d1/?text=float+to+right" alt="float to right">
			</div>
		</div>
	</section>

	<section class="container" id="examples">
		<h5 class="title">Examples</h5>
		<hr>
		<p>
		<ul>
			<li><a href="#" title="Getting Started">Getting Started</a>
			</li>
			<li><a href="#" title="Typography">Typography</a></li>
			<li><a href="#" title="Blockquotes">Blockquotes</a></li>
			<li><a href="#" title="Buttons">Buttons</a></li>
			<li><a href="#" title="Lists">Lists</a></li>
			<li><a href="#" title="Forms">Forms</a></li>
			<li><a href="#" title="Tables">Tables</a></li>
			<li><a href="#" title="Grids">Grids</a></li>
			<li><a href="#" title="Codes">Codes</a></li>
			<li><a href="#" title="Utilities">Utilities</a></li>
			<li><a href="#" title="Tips">Tips</a></li>
			<li><a href="#" title="Browser Support">Browser Support</a>
			</li>
		</ul>
		</p>
	</section>
</main>
</body>
</html>
